<template>
  <div id="map" ref="chinaMapRef"></div>
</template>

<script lang="ts">
export default {
  name: "ChinaMap",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import chinaMap from "./china.json";

const chinaMapRef = ref();

// 必须注册地图
echarts.registerMap("china", chinaMap as any);

// 数据
const data = [
  { name: "台湾", value: "34580" },
  { name: "香港", value: "1497" },
  { name: "四川", value: "134" },
  { name: "广东", value: "53" },
  { name: "西藏", value: "53" },
  { name: "海南", value: "24" },
  { name: "内蒙古", value: "14" },
  { name: "天津", value: "12" },
  { name: "福建", value: "10" },
  { name: "黑龙江", value: "10" },
  { name: "辽宁", value: "9" },
  { name: "青海", value: "9" },
  { name: "重庆", value: "8" },
  { name: "上海", value: "7" },
  { name: "陕西", value: "5" },
  { name: "山东", value: "5" },
  { name: "新疆", value: "5" },
  { name: "北京", value: "4" },
  { name: "云南", value: "4" },
  { name: "江苏", value: "2" },
  { name: "湖北", value: "1" },
  { name: "吉林", value: "1" },
  { name: "河南", value: "1" },
  { name: "江西", value: "1" },
  { name: "甘肃", value: "1" },
  { name: "浙江", value: "0" },
  { name: "广西", value: "0" },
  { name: "河北", value: "0" },
  { name: "安徽", value: "0" },
  { name: "湖南", value: "0" },
  { name: "澳门", value: "0" },
  { name: "山西", value: "0" },
  { name: "贵州", value: "0" },
  { name: "宁夏", value: "0" },
];
onMounted(() => {
  const myEchart = echarts.init(chinaMapRef.value);
  const option = {
    title: {
      text: "新冠疫情新增确诊数据",
      left: "center",
      top: 20,
    },
    series: {
      name: "疫情情况",
      type: "map",
      //   指定地图
      map: "china",
      //   可以将数据写在这里，也可以定义在外面
      data,
      label: {
        show: true,
      },
    },
    tooltip: {},
    // 设置左边的类似图例的东西并指定按照数据区间指定颜色
    visualMap: {
      type: "piecewise",
      pieces: [
        { min: 1001, color: "#b80909" },
        { min: 101, max: 1000, color: "#f57567" }, // 高风险
        { min: 11, max: 100, color: "#ff9985" }, // 中风险
        { min: 1, max: 10, color: "#ffe5db" }, // 低风险
        { min: 0, max: 0, color: "#fff" }, // 0风险
      ],
    },
  };
  myEchart.setOption(option);
});

// 爬取网页表格数据：
/* const list = document.querySelectorAll('.VirusTable_1-85-1_3m6Ybq');
  const arr = []
  for (let i = 0; i < list.length; i++) {
      const item = list[i];
      const name = item.children[0].innerText;
      const value = item.children[1].innerText;
      arr.push({
        name,
        value
      })
  }
//   转为字符串方便赋值数据
  JSON.stringify(arr) */
</script>

<style scoped>
#map {
  width: 100%;
  height: 400px;
}
</style>
